<template>
	<view class="datails">
		<!--如果标题不为空的话小-->
		<view v-if="userObj.text != null">
			<view>
				<view style="margin-top: 10rpx; display: flex; justify-content: space-between;align-items: center;">
					<view class="">
						<text style="color: #999;"> 编号：</text>{{ userObj.id}}
					</view>
					<span class="notice-typePuTong" v-if="userObj.notification_type == 1">普通</span>
					<span class="notice-type" v-if="userObj.notification_type == 2">紧急</span>
				</view>
				<view class="water_Id" style="margin-top: -20rpx">
					<view class="" style="text-align: center; font-size: 18px; font-weight: 600; line-height: 55px">
						{{ userObj.notice_name }}
					</view>
				</view>
				<view class="time shadow pl-4 rounded-1 mb-2" style="background: #fff">
					<view class="time_Fa" style="font-size: 14px">
						发布单位：
						<span style="color: #333;font-size: 14px">{{ userObj.notice_type }}</span>
					</view>
					<view class="time_shi" style="font-size: 14px">
						发布时间：
						<span style="color: #333;font-size: 14px">{{ userObj.beginTime }}</span>
					</view>

					<view class="time_shi" v-if="userObj.forwardObject != null" style="font-size: 14px">
						转发自：
						<span style="color: #333;font-size: 14px">{{ userObj.forwardObject }}</span>
					</view>
				</view>
			</view>

			<view class="center_in" style="">
				<view class="honorific">
					<view style="font-size: 34rpx ">尊敬的{{ user_name }}，您好</view>
					<view>
						<view class="center_text2">
							<rich-text :nodes="userObj.text"></rich-text>
						</view>
						<view class="flexClsNowrapSpcBtw"
							style="margin-top: 20px ; display: flex;align-items: center; justify-content: space-between;background-color:#f2f2f2;padding:10px;box-sizing: border-box;"
							v-if="img.length>0">
							<!-- -->
							<!-- <view style="margin-right: 10px;">内容图片：</view> -->
							<img v-for="(item,index) in img"
								style="width: 200rpx;height: 200rpx;border-radius: 5px;object-fit: cover;"
								@click="imageBig(index,img)" :src="item" mode="">

						</view>






					</view>
					<view class="border-top mt-3 flexClsNowrapSpcBtw align-center"
						style="margin-top: 5px;justify-content: space-between;">
						<view class="browse" style="display: flex">
							<view style="width: 23px; height: 11px; padding-right: 5px">
								<image style="width: 100%; height: 100%" src="../../static/image/browse.png" alt="">
								</image>
							</view>
							{{ userObj.seeCount }}
						</view>
						<view style="font-size: 13px; color: #999; text-align: right;">
							失效时间：
							<span>
								{{ userObj.notice_invalid_time.substr(0, 4)==9999? '永久有效': userObj.notice_invalid_time.substr(0, 10) }}
							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bill-deta-btn">
			<button @click="prev" class="yilingqu">返回列表</button>
		</view>
		<!-- <button @click='prev'>返回列表</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userObj: {},
				noticeList: {},
				user_name: null,
				user_sex: null,
				img: [],
				id: null
			}
		},
		onLoad(options) {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]

			const item = JSON.parse(decodeURIComponent(options.item))
			item.beginTime ? item.beginTime.substring(0, 16) : ''
			this.userObj = item
			console.log(this.userObj, 'qqqqqqqqqqqqqqqqqqqqqqqqqqq')
			if (this.userObj.notice_type == '助业平台') {
				console.log('asd')
				//添加平台查看记录
				console.log(this.userObj.id)
				this.addPingTaiSee()
			} else {
				this.getNewNotice()

			}

			this.user_name = uni.getStorageSync('rawData').userName
		},
		onShow() {},
		mounted() {},
		methods: {
			//点击图片放大
			imageBig(index, url) {
				uni.previewImage({
					current: index,
					urls: url //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				})
			},
			//返回上一页
			prev() {
				uni.navigateBack({
					delta: 1
				})
			},
			addPingTaiSee() {
				this.$request.api
					.addptRecord({
						id: this.userObj.id,
						user_id: uni.getStorageSync('rawData').userId
					})
					.then((res) => {})
			},

			async getNewNotice() {
				// NoticeDetail
				let res = await this.$request.api.NoticeDetail({
					id: this.userObj.id,
					org_id: this.userObj.org_id,
					user_id: uni.getStorageSync('rawData').userId,
					// notice_type:'业主端',//查询类型    助业网，员工端 业主端
					// pageIndex: 1,
					room_id: this.homelist.roomId
				})
				this.noticeList = res.data.data
				this.isNotice = res.data.data.readState || true

				if (this.noticeList.notice_image != null && this.noticeList.notice_image != '') {
					this.img = this.noticeList.notice_image.split('@')
				}


			}
		}
	}
</script>

<style lang="scss">
	.datails {
		padding: 25px;
		padding-top: 0rpx;
		background-color: #ffffff;

		.water_Id {
			min-height: 80rpx;

			height: 100rpx;

			.water_txt {
				font-size: 46rpx;
				font-weight: 600;
				float: left;
				line-height: 100rpx;
			}

			.tive {
				width: 120rpx;
				float: right;
				line-height: 50rpx;
				text-align: center;
				color: #ffffff;
				background-color: #46d345;
				font-size: 30rpx;
				border-radius: 10rpx;
			}
		}

		.time {
			line-height: 80rpx;
			color: #b2b2b2;
			font-size: 30rpx;
			border-bottom: 2rpx solid #eeeeee;

			.time_Fa {
				// width: 30%;
				// float: left;
			}

			.time_shi {
				// width: 70%;
				// float: left;
				margin-top: -12px;
			}
		}

		.center_in {
			width: 100%;
			font-size: 38rpx;
			padding-top: 80rpx 20rpx 0 0;
			color: #454545;

			.honorific {
				width: 100%;
				display: inline-block;
				line-height: 80rpx;
			}

			.center_text {
				line-height: 50rpx;
				letter-spacing: 3rpx;
			}

			.center_text2 {
				line-height: 50rpx;
				letter-spacing: 3rpx;
				font-size: 13px;
			}

			.center_Img {
				width: 100%;

				display: flex;
				background: #f4f4f4;

				.Img_item {
					// flex: 1;
					width: 215rpx;
					height: 212.5rpx;
					margin: 30rpx 10rpx;

					.Img_itemL {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}

			.browse {
				font-size: 30rpx;

				color: #999999;
				// padding-top: 80rpx;
			}
		}
	}

	.bill-deta-btn {
		width: 100%;
		margin-top: 30rpx;

		.pay {
			background: #ff9900 !important;
			color: #fff;
		}

		.yilingqu {
			width: 80%;
			height: 84rpx;
			// background:#F9A832;
			// background-color: #F9A832;
			background: linear-gradient(180deg, #76d904 0%, #417505 100%);
			border-radius: 44rpx;
			line-height: 84rpx;
			color: #ffffff;
			text-align: center;
			font-size: 32rpx;
		}

		.guar-back-w i {
			width: 6px;
			height: 16px;
			background: linear-gradient(180deg, #76d904 0%, #417505 100%);
			border-radius: 4px;
			display: inline-block;
			vertical-align: middle;
			margin-top: -3px;
		}
	}

	.notice-type {
		// width: 80rpx;
		// height: 40rpx;
		// background: linear-gradient(90deg, #FF6666 0%, #FD3636 100%);
		// border-radius: 12rpx 0;
		// text-align: center;
		// color: #fff;
		// font-size: 24rpx;
		// line-height: 40rpx;
		color: rgb(255, 255, 255);
		background: red;
		padding: 10rpx 20rpx;
		text-align: center;
		border-bottom-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.notice-typePuTong {
		// width: 80rpx;
		// height: 40rpx;
		// background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		// border-radius: 12rpx 0;
		// text-align: center;
		// color: #fff;
		// font-size: 24rpx;
		// line-height: 40rpx;
		color: rgb(255, 255, 255);
		background: rgb(85, 170, 0);
		padding: 10rpx 20rpx;
		text-align: center;
		border-bottom-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}
</style>